<template>
  <pannel-view @refresh="onRefresh" @more="onMore" :finshed="finshed">
    <div class="list">
      <div class="item" v-for="(item, index) of list" :key="index" @click="onClickItem(item)">{{ item }}</div>
    </div>
  </pannel-view>

  <tip-popup ref="oTipPopup"></tip-popup>
</template>
<script setup>
import { ref } from 'vue'

const oTipPopup = ref(null);

const onClickItem = () => {
  oTipPopup.value.show();
}


const list = ref([])
const total = 100;
//  用来判断数据是否已经加载完毕
const finshed = ref(false)

//  刷新
const onRefresh = async () => {
  list.value = [];
  finshed.value = false;
}

// 模拟异步请求获取更多数据
const onMore = async () => {
  setTimeout(async () => {
    await fetchData();  

if(list.value.length >= total) {
  finshed.value = true;
} else {
  finshed.value = false;
}
  }, 1000)


}

async function fetchData() {
  list.value.push(...Array.from({ length: 10 }, (_, i) => i + list.value.length + 1));
}

</script>

<style lang="scss" scoped>
  .list {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;

    .item { 
      height: 60px;
      border: 1px solid red;
      margin-bottom: 20px;
    }
  }

</style>